<script setup>
import { ref, computed, toRefs, onUpdated,watch } from "vue";
import { computedAsync } from '@vueuse/core'
// import { useClipboard } from '@vueuse/core'
// import { View } from "pack-vditor"
import RobotEl from "./robot.vue"
import UserEl from "./user.vue"
import {getMessage} from "../utils/db"
const props = defineProps(["main", "data", "index"])
const { main, index, data } = props;
// const { copy, copied, isSupported } = useClipboard()


const row = computedAsync(async () => {
    if(main.chatData.id === data.id){
        return main.chatData;
    }else{
        return await getMessage(data.id)   
    }
})

const current = computed(() => data.list.indexOf(data.id))
const total = computed(() => data.list.length);
const role = computed(() => row.value?.role)

</script>

<template>
    <div v-if="row" class="chat-message">
        <RobotEl v-if="role == 'ROBOT'" :main="main" :row="row" :index="index" :id="row.id" :total="total" :current="current"></RobotEl>
        <UserEl v-if="role == 'USER'" :main="main" :row="row" :index="index" :id="row.id" :total="total" :current="current"></UserEl>
    </div>
</template>